<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <MyHeaderVue @addList="addList" />

    <!-- 主体部分 -->
   <MyBody :renderList="renderList" @changeFlag="changeFlag" :allChoose="allChoose" v-model="allChoose" @removeList="removeList" />
    <!-- 底部部分 -->
   <MyFooter :aliveList="aliveList" @removeAllList="removeAllList" :type="type" @changeRender="changeRender" :list="list" />
  </section>
</template>

<script>
import MyHeaderVue from './components/MyHeader.vue'
import MyBody from './components/MyBody.vue'
import MyFooter from './components/MyFooter.vue'
export default {
  components:{
    MyHeaderVue,MyBody,MyFooter
  },
  data(){
    return{
     list:JSON.parse(localStorage.getItem('list'))||[],
     type:'all'
    }
  },
created(){
  localStorage.setItem('list',JSON.stringify([{id:1,text:'行万里路',flag:true},{id:2,text:'吃饭',flag:true},{id:3,text:'打架',flag:true}]))
},
  methods:{
changeFlag(id){
const obj=this.list.find(item=>item.id===id)
obj.flag=!obj.flag
},
addList(text){
const obj={id:+new Date,text:text,flag:false}
this.list=[obj,...this.list]
},
removeList(id){
 this.list=this.list.filter(item=>item.id!==id) 
},
removeAllList(){
  this.list=this.list.filter(item=>!item.flag)
},
changeRender(type){
  this.type=type
}
  },
  computed:{
    allChoose:{
      get(){
    return this.list.every(item=>item.flag)
      },
      set(){
       this.list.forEach(item=>item.flag=!item.flag)
      }
    },
    aliveList(){
      return this.list.filter(item=>!item.flag).length
    },
    renderList(){
    switch (this.type) {
      case 'all':
        return this.list
       case 'active':
        return this.list.filter(item=>!item.flag)
        case 'completed':
        return this.list.filter(item=>item.flag)
      default:
        return this.list
    }
    }
    }

  }

</script>

<style></style>
